<template>
    <div class="coupons text">
        <div class="big">
            <!--头部—优惠券列表-->
            <div class="top">
                <div class="Leftgreen"></div>
                <div class="other">
                    &nbsp;优惠券列表
                    <div class="Topbutton">
                        <el-button class="el-button" @click="refresh">
                            <i class="el-icon-refresh"></i>
                            刷新
                        </el-button>
                        <el-button class="el-button" @click="back">
                            <i class="el-icon-arrow-left"></i>
                            返回
                        </el-button>
                    </div>
                </div>
            </div>
            <!--筛选查询-->
            <div class="search">
                &nbsp;&nbsp;
                <i class="el-icon-search"></i>
                <span class="text2 line">&nbsp;筛选查询</span>
                <el-button class="el-button searchbutton" @click="AdvancedSearch">
                    高级检索
                </el-button>
                <div class="searchInterior text2">
                    <el-form ref="form" :model="form" label-width="90px" @keyup.enter.native="sift">
                        <el-form-item label="优惠券名称:" class="item" >
                            <el-input v-model="form.name" placeholder="请输入优惠券名称" @click.native="prompt"></el-input>
                        </el-form-item>
                        <el-form-item label="发送方式:" class="item" >
                            <el-select v-model="form.region" placeholder="全部" @click.native="prompt">
                                <el-option label="自动发放" value="2"></el-option>
                                <el-option label="活动领取" value="3"></el-option>
                                <el-option label="人工发放" value="4"></el-option>
                                <el-option label="无限制" value="5"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="优惠券状态:" class="item" >
                            <el-select v-model="form.state" placeholder="全部" @click.native="prompt">
                                <el-option label="上线" value="2"></el-option>
                                <el-option label="下线" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--数据列表—头-->
            <div class="data">
                &nbsp;&nbsp;
                <i class="el-icon-document"></i>
                <span class="text2 line">&nbsp;数据列表</span>
                <el-button disabled class="databutton">排序方式<i class="el-icon-caret-bottom"></i></el-button><!--下拉菜单-->
                <el-button disabled class="databutton">显示条数<i class="el-icon-caret-bottom"></i></el-button>
                <el-button class="databutton">
                    <router-link to="/addCoupon" class="a2">添加优惠券</router-link>
                </el-button>
            </div>
            <!--数据列表—表格-->
            <div class="tableList">
                <el-table class="el-table"
                          :header-cell-style="{background:'#f6f7f9'}"
                          :data="tableList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                          border style="width: 1095px">
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column prop="couponCode" align="center" label="编号" sortable></el-table-column>
                    <el-table-column prop="couponName" align="center" label="优惠券名称" sortable></el-table-column>
                    <el-table-column prop="startDate" align="center" label="开始时间" sortable></el-table-column>
                    <el-table-column prop="endDate" align="center" label="结束时间" sortable></el-table-column>
                    <el-table-column prop="couponsOnline" align="center" label="上线/下线" sortable>
                        <template slot-scope="scope">
                            <el-switch class="switch"
                                    v-model="scope.row.couponsOnline"
                                    active-color="#EFEFEF"
                                    inactive-color="#1ABC9C"
                                    :active-value="3"
                                    :inactive-value="2"
                                    :plain="true"
                                    @change="changeSwitch(scope.row)">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="couponsGrant" align="center" label="发放方式" sortable>
                        <template slot-scope="props">
                            <el-row>
                                <el-col>
                                    <span v-if="props.row.couponsGrant == '2'">自动发放</span>
                                    <span v-if="props.row.couponsGrant == '3'">活动领取</span>
                                    <span v-if="props.row.couponsGrant == '4'">人工发放</span>
                                    <span v-if="props.row.couponsGrant == '5'">无限制</span>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="issueQuantity" align="center" label="数量" sortable></el-table-column>
                    <el-table-column label="操作" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                            <el-button type="text" size="small" @click="deleteClick(scope.row.couponId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--查看弹出框-->
            <div>
                <el-dialog title="优惠券详情" :visible.sync="dialogFormVisible" class="title" >
                    <el-form :model="form">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="优惠券编号:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.couponCode" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="优惠券名称:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.couponName" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="开始时间:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.startDate" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束时间:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.endDate" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="优惠券状态:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.couponsOnline" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="获取方式:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.couponsGrant" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="优惠券数量:" :label-width="formLabelWidth">
                                    <el-input class="ckInput" v-model="form.issueQuantity" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="优惠券备注:" :label-width="formLabelWidth">
                                    <el-input class="ckInputL" type="textarea" v-model="form.couponsRemarks" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </el-dialog>
            </div>
            <!--高级检索弹出框-->
            <div>
                <el-dialog title="高级检索" :visible.sync="dialogAFormVisible" class="title" >
                    <el-form>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="优惠券名称:"  :label-width="formLabelWidth">
                                    <el-input v-model="form.name2" class="ckInput" placeholder="请输入优惠券名称" autocomplete="off" style=" width: 194px;"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="发放方式:" :label-width="formLabelWidth">
                                    <el-select v-model="form.region2" placeholder="全部">
                                        <el-option label="自动发放" value="2"></el-option>
                                        <el-option label="活动领取" value="3"></el-option>
                                        <el-option label="人工发放" value="4"></el-option>
                                        <el-option label="无限制" value="5"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item  label="开始时间:" :label-width="formLabelWidth">
                                    <template>
                                        <div class="block" >
                                            <el-date-picker style=" width: 194px;"
                                                            value-format="yyyy-MM-dd"
                                                    v-model="form.startDate2"
                                                    type="date"
                                                    placeholder="选择开始日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="结束时间:" :label-width="formLabelWidth">
                                    <template>
                                        <div class="block">
                                            <el-date-picker style=" width: 194px;"
                                                    value-format="yyyy-MM-dd"
                                                    v-model="form.endDate2"
                                                    type="date"
                                                    placeholder="选择结束日期">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="优惠券状态:" :label-width="formLabelWidth">
                                    <el-select v-model="form.state2" placeholder="全部">
                                        <el-option label="上线" value="2"></el-option>
                                        <el-option label="下线" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-divider></el-divider>
                    <div slot="footer" class="dialog-footer" style="margin-top: -30px;">
                        <el-button @click="reset">重 置</el-button>
                        <el-button @click="retrieval" class="actionSearch">开始检索</el-button>
                    </div>
                </el-dialog>
            </div>
            <!--尾部—分页部分-->
            <div class="pagination">
                <div class="paginationLeft">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <el-button disabled>批量操作<i class="el-icon-caret-bottom"></i></el-button>
                    <el-button class="FYqd">确定</el-button>
                </div>
                <div style="margin-top:.2rem;margin-left: .2rem;">
                    <el-pagination background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="[8,6,4,2]"
                            :page-size="pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="tableList.length" style="padding: 8px 0px 0px 375px;">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "coupons",
        data() {
            return {
                //查看弹框
                dialogFormVisible: false,
                //高级检索弹框
                dialogAFormVisible:false,
                form: {
                    //高级检索数据
                    name2: '',
                    region2: '',
                    state2: '',
                    startDate2:'',/*开始日期数据*/
                    endDate2:'',/*结束日期数据*/
                    //筛选数据
                    name: '',
                    region: '',
                    state: '',
                    //表数据
                    couponCode:'',
                    couponName:'',
                    startDate:'',
                    endDate:'',
                    couponsOnline:'',
                    issueQuantity:'',
                    couponsGrant:'',
                    couponsRemarks:''
                },
                //开始日期数据
                value1: '',
                //定义表数据集合
                tableList:[],
                //分页
                currentPage: 1,
                currentIndex: '',
                pagesize: 8,
                //Form表单lable宽
                formLabelWidth: '100px'
            }
        },
        methods:{
            //渲染后台优惠券信息列表
            async getCouponslistAll(){
               const {data:res} =await this.$http.post('/coupons/getCouponslistAll')
               this.tableList = res;
            },
            //分页
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage= val
            },
            //刷新按钮方法
            refresh(){
                window.location.reload();
            },
            //返回按钮方法
            back(){
                this.$router.back()
            },
            //重置按钮方法
            reset(){
                this.form.name2 = '';
                this.form.region2 = '';
                this.form.startDate2 = '';
                this.form.endDate2 = '';
                this.form.state2 = '';
            },
            //查看表格单条数据
            handleClick(row){
                console.log(row);
                this.dialogFormVisible = true;
                this.form.couponCode = row.couponCode;
                this.form.couponName = row.couponName;
                this.form.startDate = row.startDate;
                this.form.endDate = row.endDate;
                //优惠券状态类型转换
                if(row.couponsOnline == 2){
                    this.form.couponsOnline =  '上线'
                }else if (row.couponsOnline == 3){
                    this.form.couponsOnline = '下线'
                }
                //优惠券发放方式类型转换
                if (row.couponsGrant == 2){
                    this.form.couponsGrant = '自动发放'
                } else if (row.couponsGrant == 3){
                    this.form.couponsGrant = '活动领取'
                } else if (row.couponsGrant == 4){
                    this.form.couponsGrant = '人工发放'
                } else if (row.couponsGrant == 5){
                    this.form.couponsGrant = '无限制'
                }
                this.form.issueQuantity = row.issueQuantity;
                this.form.couponsRemarks = row.couponsRemarks
            },
            //删除表格单条数据
            async deleteClick(id,row) {
                console.log(id);
                const confirmResult = await  this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err=>{
                    return '已取消删除！'
                })
                if (confirmResult !== 'confirm'){
                    return this.$message.info('已取消删除！')
                }
                const {data:res} = await this.$http.get('/coupons/deleteCouponslist', {
                    params:{
                        couponId:id
                    },
                })
                this.$message.success('删除成功！')
                this.getCouponslistAll();
            },
            //高级检索弹出框
            AdvancedSearch(){
                this.dialogAFormVisible = true;
            },
            //高级检索方法
            async retrieval(){
                console.log(this.form.region2)
                const {data:res} = await this.$http.post("/coupons/getCouponslistFuzzyCheck",{
                    "couponName":this.form.name2,
                    "couponsGrant":this.form.region2,
                    "startDate":this.form.startDate2,
                    "endDate":this.form.endDate2,
                    "couponsOnline":this.form.state2,
                })
                this.tableList = res;
                this.dialogAFormVisible = false;
                console.log(this.form.startDate2);
                console.log(this.form.endDate2);
            },
            //筛选查询方法
            async sift(){
                console.log(this.form.region)
                const {data:res} = await this.$http.post("/coupons/getCouponslistFuzzyCheck",{
                    "couponName":this.form.name,
                    "couponsGrant":this.form.region,
                    "couponsOnline":this.form.state,
                })
                this.tableList = res;
            },
            //上/下线按钮方法
            changeSwitch(row){
                console.log(row.couponsOnline);
                const data = {
                    id:row.id,
                    value:row.couponsOnline,
                };
                //按钮修改后台online数据成功消息的方法
                this.$message.success('优惠券状态修改成功！')
            },
            //提示筛选搜索方式
            prompt() {
                this.$message('按Enter键进行搜索');
            },
        },
        created() {
            //调用“渲染后台优惠券信息列表”方法
            this.getCouponslistAll();
        }
    }
</script>

<style scoped>
    .coupons{
        width: 100%;
        height: 100%;
    }
    .big{
        background-color: #F6F7F9;
        height: 100%;
        width: 100%;
    }
    .top{
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        height: 40px;
        line-height: 40px;
    }
    .Leftgreen{
        background-color: #1ABC9C;
        width: 4px;
        height: 19px;
        float: left;
        margin-top: 11px;
    }
    .text{
        color: #978f96;
        font-family: Arial;
    }
    .text2{
        color: #5C6573;
    }
    .Topbutton{
        float: right;
        margin-right: 40px;
        margin-top: 1.5px;
    }
    .el-button{
        margin-right: 15px;
        height: 30px;
        Padding-top:8px
    }
    .search{
        margin-top: 20px;
        width: 1093px;
        height: 100px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .searchInterior{
        background-color: white;
        height: 60px;
        border: 1px #d5d5d5 solid;
    }
    .searchbutton{
        float: right;
        margin-right: 20px;
        margin-top: 5px;
    }
    .item{
        width:300px;
        float: left;
        margin: 10px 10px 0px 10px;
    }
    .data{
        margin-top: 20px;
        width: 1093px;
        height: 40px;
        background-color: #F3F3F3;
        border: 1px #d5d5d5 solid;
        line-height: 40px;
    }
    .databutton{
        float: right;
        margin-right: 15px;
        margin-top: 5px;
    }
    .el-table{
        width: 400px;
    }
    .tableList{
        border: 1px #d5d5d5 solid;
        width: 1093px;
    }
    .pagination{
        height: 49px;
        width: 1094px;
        background-color: #FFF;
        border: 1px #d5d5d5 solid;
    }
    .paginationLeft{
        float: left;
        padding: 10px 0px 0px 40px;
    }
    .FYqd{
        position: relative;
        left: 660px;
    }
    .title{
        height: 500px;
    }
    .ckInput{
        width: 180px;
    }
    .ckInputL{
        width: 480px;
    }
    .a2{
        color: #5C6573;
        text-decoration: none;
    }
    .actionSearch{
        background-color: #409EFF;
        color: #fff;
    }
    .actionSearch:hover{
        background-color: #2e73b9;
        color: white;
    }
</style>